<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import type { MedicineDetail } from '@/types/medicine'
import { deleteMedicine, getMedicineDetail } from '@/services/medicine'

let id: number
const medicineDetail = ref<MedicineDetail>()

onLoad((e) => {
  id = e!.id
})
onShow(async () => {
  medicineDetail.value = await getMedicineDetail(id)
})

// 实现轮播图的预览效果
function preview(index: number) {
  uni.previewImage({
    current: index, urls: medicineDetail.value!.medicineImgs,
  })
}

// 实现说明书预览效果
function previewSpecification() {
  uni.previewImage({
    current: 0, urls: medicineDetail.value!.specificationImgs,
  })
}

function handleUpdate() {
  uni.navigateTo({
    url: './form?id=' + id,
  })
}

async function handleDelete() {
  await deleteMedicine([id])
  await uni.navigateTo({
    url: './medicine',
  })
}
</script>

<template>
  <view class="container">
    <view class="goods-detail-container" v-if="medicineDetail">
      <!-- 轮播图区域 -->
      <swiper :indicator-dots="true" :autoplay="true" :interval="6000" :duration="1000" :circular="true">
        <swiper-item v-for="(url, index) in medicineDetail.medicineImgs" :key="url">
          <image :src="url" @click="preview(index)"></image>
        </swiper-item>
      </swiper>

      <!-- 商品信息区域 -->
      <view class="goods-info-box">
        <!-- 商品价格 -->
        <view v-if="medicineDetail.price" class="price">￥{{ medicineDetail.price }}</view>
        <!-- 信息主体区域 -->
        <view class="goods-info-body">
          <!-- 商品名称 -->
          <view class="goods-name">{{ medicineDetail.medicineName }}</view>
          <!-- 收藏 -->
          <!-- <view class="favi">
          <uni-icons type="star" size="18" color="gray"></uni-icons>
          <text>收藏</text>
        </view> -->
        </view>
        <!-- 运费 -->
        <!-- <view class="yf">快递：免运费</view> -->
      </view>

      <uni-table border stripe emptyText="暂无更多数据">
        <!-- 表头行 -->
        <!-- <uni-tr v-show="false">
        <uni-th align="left" width="120">日期</uni-th>
        <uni-th align="left">地址</uni-th>
      </uni-tr> -->
        <!-- 表格数据行 -->
        <uni-tr>
          <uni-td>通用名</uni-td>
          <uni-td>{{ medicineDetail.genericName }}</uni-td>
        </uni-tr>
        <uni-tr>
          <uni-td>药品名称</uni-td>
          <uni-td>{{ medicineDetail.medicineName }}</uni-td>
        </uni-tr>
        <uni-tr>
          <uni-td>药品类型</uni-td>
          <uni-td>{{ medicineDetail.medicineType }}</uni-td>
        </uni-tr>
        <uni-tr>
          <uni-td>规格包装</uni-td>
          <uni-td>{{ medicineDetail.specificationPackaging }}</uni-td>
        </uni-tr>
        <uni-tr>
          <uni-td>剂型</uni-td>
          <uni-td>{{ medicineDetail.medicineForm }}</uni-td>
        </uni-tr>
        <uni-tr>
          <uni-td>用法用量</uni-td>
          <uni-td>{{ medicineDetail.usageDosage }}</uni-td>
        </uni-tr>
        <uni-tr>
          <uni-td>疗程</uni-td>
          <uni-td>{{ medicineDetail.treatmentCourse }}</uni-td>
        </uni-tr>
        <uni-tr>
          <uni-td>厂家</uni-td>
          <uni-td>{{ medicineDetail.manufacturer }}</uni-td>
        </uni-tr>
        <uni-tr>
          <uni-td>批准文号</uni-td>
          <uni-td>{{ medicineDetail.approvalNumber }}</uni-td>
        </uni-tr>
        <uni-tr>
          <uni-td>生产日期</uni-td>
          <uni-td>{{ medicineDetail.productionDate }}</uni-td>
        </uni-tr>
        <uni-tr>
          <uni-td>有效期至</uni-td>
          <uni-td>{{ medicineDetail.validUntil }}</uni-td>
        </uni-tr>
      </uni-table>

      <image v-if="medicineDetail.specificationImgs.length>0" @click="previewSpecification()"
             style="width: 750rpx; height: 1200rpx;"
             mode="scaleToFill" :src="medicineDetail.specificationImgs[0]"></image>
    </view>

    <view class="btns">
      <button type="primary" @click="handleUpdate">修改</button>
      <button type="warn" class="btn-delete" @click="handleDelete">删除</button>
    </view>
  </view>
</template>

<style lang="scss">
.container {
  padding: 10px;
}

swiper {
  height: 750rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

// 商品信息区域的样式
.goods-info-box {
  padding: 10px 0 10px 10px;
  margin-bottom: 25px;

  .price {
    color: #c00000;
    font-size: 18px;
    margin: 10px 0;
  }

  .goods-info-body {
    display: flex;
    justify-content: space-between;

    .goods-name {
      font-size: 13px;
      padding-right: 10px;
    }

    // 收藏区域
    .favi {
      width: 120px;
      font-size: 12px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-left: 1px solid #efefef;
      color: gray;
    }
  }

  // 运费
  .yf {
    margin: 10px 0;
    font-size: 12px;
    color: gray;
  }
}

.goods-detail-container {
  // 给页面外层的容器，添加 50px 的内padding，
  // 防止页面内容被底部的商品导航组件遮盖
  padding-bottom: 60px;
}

.btns {
  width: 730rpx;
  position: fixed;
  bottom: 5px;
  left: 10px;
  right: 10px;

  display: flex;
  // flex-direction: row;
  // justify-content: flex-end;
}

.btns button {
  flex: 1;
  line-height: 2;
  font-size: 16px;
  border-radius: 20px;
}

.btn-delete {
  margin-left: 10px;
  margin-right: 10px;
}
</style>
